<template>
	<view class="outside_box">
		<van-swipe-cell :right-width="type == 'all'?177:75" :disabled="disabled" v-for="(item, index) in dataList"
			:key="index">

			<!-- 主体内容 -->
			<van-cell-group>
				<view class="data_item" @click="navigate_to_details(item)">
					<view class="image_box">
						<image :src="item.image[0]" mode="aspectFill"></image>
					</view>
					<view class="infos">
						<view>
							<!-- 如果是丢失了证件卡类 -->
							<!-- 捡到的是校园卡或身份证 -->
							<text class="title main-font-color font-weight-bold"
								v-if="item.tags == 'lost' && (item.type == '校园卡' || item.type == '身份证')">捡到了{{item.student_name}}的{{item.type}}</text>
							<!-- 捡到的是银行卡 -->
							<text class="title main-font-color font-weight-bold"
								v-else-if="item.tags == 'lost' && item.type == '银行卡'">捡到了尾号为{{utils.substring(item.bank_card_No, 15)}}的{{item.bank_card_name}}卡</text>
							<!-- 捡到的是电影卡 -->
							<text class="title main-font-color font-weight-bold"
								v-else-if="item.tags == 'lost' && item.type == '电影卡'">捡到了尾号为{{utils.substring(item.movie_card_No, 8)}}的{{item.type}}</text>
							<!-- 捡到的是其它物品 -->
							<text class="title main-font-color font-weight-bold"
								v-else-if="item.tags == 'lost' && item.type == '其它'">捡到了{{item.item_name}}</text>
							<text class="title main-font-color font-weight-bold"
								v-else-if="item.tags == 'found' && item.type == '其它'">弄丢了{{item.item_name}}</text>
						</view>

						<view class="bottom_info">
							<view class="user_info">
								<view class="avatar">
									<image :src="item.avatarUrl" mode="aspectFill"></image>
								</view>
								<text class="nickname text">{{item.nickname}}</text>
							</view>
							<text class="date text">{{utils.timesFun(item.post_time)}}</text>
						</view>
					</view>
				</view>
			</van-cell-group>

			<!-- 右边的选项 -->
			<view class="right_options" :style="type=='all'?'padding: 0 20rpx;width:315rpx':''" slot="right">
				<view class="active_box" v-if="type == 'all'">
					<view class="right_item">
						<view class="qrCode" @click="create_qrCode(item)">
							<image src="../../static/profile/profileItems/QRcode.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="right_item">
						<view class="edit" @click="re_edit(item)">
							<image src="../../static/profile/profileItems/edit.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<view class="right_item" :style="type!='all'?'padding: 0 20rpx;':''">
					<view class="del" @click="del_info(item)">
						<image src="../../static/profile/profileItems/delete.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>

		</van-swipe-cell>
	</view>
</template>

<script module="utils" src="@/wxcomponents/wxs/utils.wxs" lang="wxs"></script>
<script>
	export default {
		name: "dataItem",
		options: {
			styleIsolation: 'shared',
		},
		props: {
			// 数据
			dataList: Array,
			// 是否开启左滑功能,默认关闭
			disabled: {
				type: Boolean,
				default: true
			},
			type: {
				type: String,
				default: 'all'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			// 生成二维码
			create_qrCode(item) {
				// 跳转到二维码页面
				uni.navigateTo({
					url: `/subpkg/qrCodePage/qrCode/qrCode?_id=${item._id}`
				})
			},

			// 重新编辑信息
			re_edit(item) {
				uni.showModal({
					title: '提示',
					content: '是否要进行重新编辑'
				}).then(res => {
					if (res[1].confirm) {
						const data = JSON.stringify(item)
						uni.navigateTo({
							url: `/subpkg/profileSubPages/edit/edit?data=${data}`
						})
					}
				})
			},

			// 删除和取消已发布的信息
			del_info(item) {
				uni.showModal({
					title: '提示',
					content: '是否要删除此信息'
				}).then(res => {
					if (res[1].confirm) {
						uni.showLoading({
							title:'删除中...'
						})
						// 获取当前页面的状态，来判断删除哪个字段的数据
						const state = this.$parent.del_index
						wx.cloud.callFunction({
							name: 'remove_info',
							data: {
								state,
								UID: item.UID,
								_id: item._id
							}
						}).then(res => {
							console.log(res);
							uni.hideLoading()
							uni.showToast({
								title:'删除成功',
								icon:"success"
							}).then(()=>{
								setTimeout(()=>{
									uni.startPullDownRefresh()
								}, 500)
							})
						})
					}
				})
			},

			// 跳转到详情页面
			navigate_to_details(item) {
				uni.navigateTo({
					url: `/subpkg/detailsPage/details/details?_id=${item._id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.outside_box {
		width: 100vw;
		background-color: #f7f7f7;
	}

	.data_item {
		width: 100vw;
		height: 240rpx;
		box-sizing: border-box;
		padding: 20rpx;
		border-bottom: 2rpx solid #f7f7f7;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.image_box {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.infos {
			width: 490rpx;
			height: 200rpx;
			box-sizing: border-box;
			padding: 15rpx 20rpx 15rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				// 限制行高为2，超过就用...代替
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.bottom_info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.text {
					color: #999999;
					font-size: 24rpx;
				}

				.user_info {
					display: flex;
					align-items: center;

					.avatar {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.right_options {
		display: flex;
		// box-sizing: border-box;
		width: 336rpx;
		height: 100%;

		.active_box {
			display: flex;
		}

		.right_item {
			width: 105rpx;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			.qrCode {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #3D83E3;
				border-radius: 200rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-top: 3rpx;
					margin-left: 3rpx;
				}
			}

			.edit {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #EC9E53;
				border-radius: 200rpx;

				image {
					width: 45rpx;
					height: 45rpx;
					margin-top: -2rpx;
					margin-left: -2rpx;
				}
			}

			.del {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #E65F59;
				border-radius: 200rpx;

				image {
					width: 48rpx;
					height: 48rpx;
					margin-left: 1rpx;
				}
			}
		}

	}
</style>
